<template>
	<view>
		<view class="header">
			<view style="border-bottom: 0.5rpx solid hsla(0,0%,100%,.3);padding-bottom: 20rpx;">
				<view class="header_top">
					<view class="top_user_info">
						<u-avatar :src="avatar" ></u-avatar>
						<view class="user_info_box">
							<view class="nick_name u-line-1">{{nickName}}</view>
							<view class="user_level">
								<image class="levelIcon" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/level.png"></image>
								<view class="level_txt">{{levelName}}</view>
							</view>
							<view style="color: #000000;">客户编码：{{spread_code}}</view>
						</view>
					</view>
          <view class="top_qr_img" @click="toExtension">
						<image style="width: 80rpx;height: 80rpx;" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/erweima.png"></image>
					</view>
<!--					<view>-->
<!--						<view style="margin-bottom: 15rpx;">-->
<!--							<u-tag @click="transferModel=true" text="转账" bg-color="#fe6d34" color="#ffffff" border-color="#fe6d34" style="margin-right: 20rpx;"/>-->
<!--							<u-tag @click="openModel" text="提现" bg-color="#6de3e9" color="#000000" border-color="#6de3e9"/>-->
<!--						</view>-->
<!--						<view>-->
<!--							<u-tag @click="myTeamClick" text="营业厅" bg-color="#6de3e9" color="#000000" border-color="#6de3e9"/>-->
<!--						</view>-->


<!--					</view>-->
				</view>
			</view>
			<view class="header_bottom">
				<view class="bottom_box">
					<view>
						<view class="total_revenue">积分：{{now_money_show}}</view>
						<!-- <view class="total_revenue">预估积分：{{frozen_now_money_show}}</view> -->
					</view>
					<view>
						<view class="total_revenue">预估积分：{{frozen_now_money_show}}</view>
					</view>
					<!-- <view>
						<view style="margin-bottom: 15rpx;">
							<u-tag @click="transferModel=true" text="转账" bg-color="#fe6d34" color="#ffffff" border-color="#fe6d34" style="margin-right: 20rpx;"/>
							<u-tag @click="openModel" text="提现" bg-color="#6de3e9" color="#000000" border-color="#6de3e9"/>
						</view>
						<view>
							<u-tag @click="myTeamClick" text="我的团队" bg-color="#6de3e9" color="#000000" border-color="#6de3e9"/>
						</view>


					</view> -->
				</view>

				<view class="bottom_box">
					<view>
						<view class="total_revenue">云积分：{{now_money_old_show}}</view>
					</view>
					<view>
						<view class="total_revenue">云预估积分：{{frozen_now_money_old_show}}</view>
					</view>
				</view>
				<view class="bottom_box">
					<view>
						<view class="total_revenue">兑换积分：{{exchange_show}}</view>
					</view>
				</view>
				<view class="bottom_box account">

					<!-- <view class="account_item">
						<view>¥{{now_money}}</view>
						<view>积分</view>
					</view> -->
					<!-- <view class="account_item" style="text-align: right;">
						<view>¥{{frozen_now_money}}</view>
						<view>预估收入</view>
					</view> -->
				</view>
				<!-- <view class="bottom_box account" style="margin-top: 20rpx;">
					<view class="account_item">
						<view>{{self_xf_num}}套</view>
						<view>购买套数</view>
					</view>
					<view class="account_item">
						<view style="text-align: center;">{{team_xf_num}}套</view>
						<view>团队套数</view>
					</view>
					<view class="account_item">
						<view style="text-align: right;">{{sm_team_xf_num}}套</view>
						<view>小方套数</view>
					</view>
				</view> -->
			</view>
		</view>
		<view style="border-bottom: 0.5rpx solid hsla(0,0%,100%,.3);margin: 20rpx 50rpx;color: #000000;padding: 20rpx;">
<!--			<view v-for="(item,index) in noticeList">{{item}}</view>-->
      <!-- <u-tag @click="transferModel=true" text="转账" bg-color="#fe6d34" color="#ffffff" border-color="#fe6d34" style="margin-right: 20rpx;"/> -->
      <u-tag @click="openModel" text="提现" bg-color="#6de3e9" color="#000000" border-color="#6de3e9" style="margin-right: 20rpx;"/>
      <u-tag @click="myTeamClick" text="营业厅" bg-color="#6de3e9" color="#000000" border-color="#6de3e9" style="margin-right: 20rpx;"/>
      <u-tag @click="myYwfx" text="业务分析" bg-color="#6de3e9" color="#000000" border-color="#6de3e9" style="margin-right: 20rpx;"/>
		</view>
		<view class="total_account">
			<text v-if="tabsCurrent==1 ||tabsCurrent==2 ||tabsCurrent==3">{{accountList[tabsCurrent].text}}：</text>
			<text v-if="tabsCurrent==1 ||tabsCurrent==2 ||tabsCurrent==3">{{accountList[tabsCurrent].price}}</text>
			<text v-if="tabsCurrent==0">预估积分：{{frozen_now_money_show}}</text>
			<text v-if="tabsCurrent==4">提现中：{{accountList[tabsCurrent].price1}}</text>
			<!-- <text v-if="tabsCurrent==5">；转出：{{accountList[tabsCurrent].price1}}</text> -->
		</view>
		<view class="middle">
			<!-- <view class="date">
				<view @click="showDate">
					{{date}}
					<u-icon style="margin-left: 10rpx;" :size="25" name="arrow-down-fill" color="#20cbd4"></u-icon>
				</view>
				<u-calendar v-model="dateShow" mode="date" @change="changeDate"></u-calendar>
			</view> -->
			<u-tabs :list="tabsList" :is-scroll="false" :current="tabsCurrent"
				active-color="#000000" bg-color="ragb(0,0,0,0)" @change="tabsChange"
				:bar-width="100" :bold="false" inactive-color="#13797f"></u-tabs>
		</view>
		<view class="bottom">
			<view class="bottom_item" v-if="tabsCurrent<4" v-for="(item,index) in logList">
				<view style="display: flex;justify-content: space-between;align-items: center;" v-if="tabsCurrent==0">
					<view>
						<view>
							{{item.describe}} {{item.pm==1?'+':'-'}}{{item.value}}
						</view>
						<view>
							{{item.status==1?'':'预估'}}
						</view>
					</view>
					<view style="text-align: right;color: #000000;font-size: 22rpx;">{{item.create_time}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;" v-else-if="tabsCurrent==1">
					<view>{{item.star}}</view>
					<view style="text-align: right;color: #000000;font-size: 22rpx;">{{item.time}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;" v-else>
					<view><text v-if="item.pm==1">+</text><text v-else>-</text>{{item.value}}</view>
					<view style="text-align: right;color: #000000;font-size: 22rpx;">{{item.create_time}}</view>
				</view>
			</view>
			<view class="bottom_item" v-if="tabsCurrent==4" v-for="(item,index) in logList">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view>
						{{item.bank_name}}
						{{item.bank_card}}						
						发起提现<text style="font-weight: bold;">{{item.money}}</text>
						</view>
					<view style="width: 170rpx;">
						<text v-if="item.apply_status==1">待审核</text>
						<text v-else-if="item.apply_status==2">已打款{{item.true_money}}</text>
						<text v-else-if="item.apply_status==3">驳回</text>
					</view>
				</view>
				<view style="text-align: left;" v-if="item.apply_status==3">驳回原因:{{item.reject_reason}}</view>
				<view style="text-align: right;color: #000000;font-size: 22rpx;">{{item.update_time}}</view>
			</view>
			<view class="bottom_item" v-if="tabsCurrent==5" v-for="(item,index) in logList">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view v-if="item.pm==0">
						转给用户{{item.to_code}}<text style="font-weight: bold;margin-left: 20rpx;">{{item.value}}</text>
					</view>
					<view v-if="item.pm==1">
						用户{{item.from_code}}转入<text style="font-weight: bold;">{{item.value}}</text>
					</view>
					<view style="width: 170rpx;">
						<text v-if="item.status==0">待审核</text>
						<text v-else-if="item.status==1">成功</text>
						<text v-else-if="item.status==2">驳回</text>
					</view>
				</view>
				<view style="text-align: left;" v-if="status==2">驳回原因:{{item.status_brief}}</view>
				<view style="text-align: right;color: #000000;font-size: 22rpx;">{{item.update_time}}</view>
			</view>
		</view>
		<u-loadmore :status="status" color="#909399" :margin-top="20"/>
		<u-modal width="auto" v-model="modelShow" :show-title="false"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="submitAccount">
			<view class="modelContent">
				<view class="withdrawType">
					<view>提现到：</view>
					<u-radio-group v-model="value" active-color="#20cbd4">
						<u-radio :name="item.name" v-for="(item, index) in withdrawTypeList" :key="index">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="accountData">
					<text>{{value}}账号：</text>
					<u-input v-if="value=='支付宝'"
						v-model="withdrawTypeList[0].accountInfo.accout"
						:placeholder="'请输入'+value+'账号'"/>
					<u-input v-if="value=='微信'"
						v-model="withdrawTypeList[1].accountInfo.accout"
						:placeholder="'请输入'+value+'账号'"/>
					<u-input v-if="value=='银行卡'" type="number"
						v-model="withdrawTypeList[2].accountInfo.accout"
						:placeholder="'请输入'+value+'账号'"/>
				</view>
				<view class="accountData">
					<text>{{value}}姓名：</text>
					<u-input v-if="value=='支付宝'"
						v-model="withdrawTypeList[0].accountInfo.userName"
						:placeholder="'请输入'+value+'姓名'"/>
					<u-input v-if="value=='微信'"
						v-model="withdrawTypeList[1].accountInfo.userName"
						:placeholder="'请输入'+value+'姓名'"/>
					<u-input v-if="value=='银行卡'" type="number"
						v-model="withdrawTypeList[2].accountInfo.userName"
						:placeholder="'请输入'+value+'姓名'"/>
				</view>
				<view class="accountData">
					<text>真实姓名：</text>
					<u-input v-model="realName" placeholder="请输入真实姓名" :disabled="true"/>
				</view>
				<view class="accountData" v-if="value=='银行卡'">
					<text>开户银行：</text>
					<u-input v-model="withdrawTypeList[2].accountInfo.accountBank"
						placeholder="请输入银行卡开户银行"/>
				</view>
				<view class="accountData" v-if="value=='银行卡'">
					<text>签约手机号：</text>
					<u-input v-model="bankPhone"
						placeholder="请输入签约手机号"/>
				</view>
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password"
						placeholder="请输入交易密码"/>
				</view>
				<view class="accountData">
					<text>提现积分：¥</text>
					<u-input v-model="withdrawPrice" type="digit"
						placeholder="请输入提现积分"/>
				</view>
				<view class="withdraw-describe">
					<view class="withdraw-label">
						<text>提现说明</text>
					</view>
					<view class="content">
						<text space="ensp">支付宝姓名必须与支付宝账户一致，否则会导致收款失败</text>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal width="auto" v-model="transferModel" :show-title="false"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="transfer">
			<view class="modelContent">
				<view class="accountData">
					<text>可转积分：</text>
					<u-input v-model="now_money"  :disabled="transferDis"/>
				</view>
				<view class="accountData">
					<text>转给：</text>
					<u-input v-model="transferForm.spread_code" placeholder="请输入要接收方的客户编码" @blur="checkuser(transferForm.spread_code)"/>
				</view>
				<view class="accountData">
					<text>姓名：</text>
					<u-input v-model="spread_code_name"  placeholder="输入上方客户编码自动获取" disabled/>
				</view>

				<view class="accountData">
					<text>转账积分：¥</text>
					<u-input v-model="transferForm.price" type="number"
						placeholder="请输入转账积分"/>
				</view>

				 <view class="accountData">
				 	<text>交易密码：</text>
				 	<u-input v-model="transferForm.payPassword" type="password"
				 		placeholder="请输入交易密码"/>
				 </view>
			</view>
		</u-modal>
		<u-modal width="500rpx" v-model="checktransferModel" :show-title="true"
		 confirm-color="#20cbd4" :show-cancel-button="true" @confirm="checktransfer" content="是否确认转账">

		</u-modal>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {userInfo,notice,distributeLog,withdraw,transferReq,spreadCodeName} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				team_xf_num:"",
				self_xf_num:"",
				sm_team_xf_num:"",
				bd_num:"",
				all_now_money:"",
				now_money:"",
				frozen_now_money:"",
				now_money_show:"",
				frozen_now_money_show:"",
				now_money_old:"",
				frozen_now_money_old:"",
				now_money_old_show:"",
				frozen_now_money_old_show:"",
				exchange_show:"",
				logList:[],
				withdrawPrice:"",
				payPassword:"",//交易密码
				bankPhone:"",
				tx_fee:"",
				withdrawTypeList: [
					{
						name: '支付宝',
						accountInfo:{
							accout:"",
							userName:""
						}
					},
					// {
					// 	name: '微信',
					// 	accountInfo:{
					// 		accout:"",
					// 		userName:""
					// 	}
					// },
					// {
					// 	name: '银行卡',
					// 	accountInfo:{
					// 		accout:"",
					// 		userName:"",
					// 		accountBank:""
					// 	}
					// }
				],
				value: '支付宝',
				modelShow:false,
				avatar: '',
				nickName:"",
				level:"",
				levelName:"",
				realName:"",
				spread_code:"",
				spread_code_name:"",
				date:"",
				dateShow:false,
				tabsList: [{
					name: '账户'
				},{
					name: 'BP'
				}, {
					name: '亲密值'
				}, {
					name: '兑换'
				},
				{
					name: '提现'
				},
				// {
				// 	name: '转账'
				// }
				],
				tabsCurrent: 0,
				accountList:[
					// {text:"累计消费",price:"0"},
					// {text:"星豆",price:"0"},
					// {text:"可用券",price:"",price1:"0"},
					// {text:"贡献值",price:"0"},
					// {text:"累计提现",price:"0",price1:"0"},
					// {text:"转入",price:"0",price1:"0"},
					{text:"",price:""},
					{text:"BP",price:"0"},
					// {text:"可用券",price:"",price1:"0"},
					{text:"亲密值",price:"0"},
					{text:"兑换积分",price:"0"},
					{text:"累计提现",price:"0",price1:"0"},
					{text:"转入",price:"0",price1:"0"}
				],
				page:1,
				status: 'loadmore',
				noticeList: [],
				transferModel:false,//转账显示
				checktransferModel:false,//转账显示
				transferForm:{
					spread_code:'',
					price:0,
					payPassword:'',
				},
				transferDis: true,
			}
		},
		onReachBottom() {
			 if(this.status!="nomore"){
				 this.page++;
				 this.status="loading";
				 distributeLog(this,{type:(this.tabsCurrent+1),page:this.page,limit:100})
			 }

		},
		onLoad() {
				userInfo(this,{type:1});
				notice(this,{})
				distributeLog(this,{type:(this.tabsCurrent+1),page:this.page,limit:100})
				var date = new Date();
				var month = date.getMonth()+1;
				var strDate = date.getDate();
				if(month >= 0 && month <=9){
					month = "0"+month;
				}
				if(strDate >= 0 && strDate <= 9){
					strDate = "0"+strDate;
				}
				this.date = date.getFullYear() + "-" +
					month + "-" +strDate;
		},
		methods: {
			selectDistributeLog(){
				userInfo(this,{type:1});
				this.page=1;
				this.logList=[];
				distributeLog(this,{type:(this.tabsCurrent+1),page:this.page,limit:100})
			},
			checkuser(res){
				console.log(1,res)
				let _self = this;
				spreadCodeName(_self,{spread_code:res});
			},
			//转账功能
			transfer(){
				let _self = this;
					_self.transferModel=true;
				if(!_self.transferForm.spread_code){
					_self.$u.toast("请输入接收会员");

					_self.transferModel=true;
					return;
				}
				if(!_self.transferForm.payPassword){
					_self.$u.toast("交易密码");
					_self.transferModel=true;
					return;
				}
				if(_self.transferForm.price <0.01){
					_self.$u.toast("请输入转账积分");
					_self.transferModel=true;
					return;
				}
				this.checktransferModel = true;
				// transferReq(_self,_self.transferForm);

			},
			checktransfer(){
				let _self = this;
					_self.transferModel=true;
				transferReq(_self,_self.transferForm);
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			submitAccount(){
				if(this.value=="支付宝"){
					if(this.withdrawTypeList[0].accountInfo.accout==""){
						this.$u.toast("请输入支付宝账号");
						this.modelShow=!this.modelShow;
						return;
					}
					if(this.withdrawTypeList[0].accountInfo.userName==""){
						this.$u.toast("请输入支付宝姓名");
						this.modelShow=!this.modelShow;
						return;
					}

				}else if(this.value=="微信"){
					if(this.withdrawTypeList[1].accountInfo.accout==""){
						this.$u.toast("请输入微信账号");
						this.modelShow=!this.modelShow;
						return;
					}
				}else if(this.value=="银行卡"){
					if(this.withdrawTypeList[2].accountInfo.accout==""){
						this.$u.toast("请输入银行卡账号");
						this.modelShow=!this.modelShow;
						return;
					}
					if(this.withdrawTypeList[2].accountInfo.accountBank==""){
						this.$u.toast("请输入开户银行");
						this.modelShow=!this.modelShow;
						return;
					}
				}
				if(this.withdrawPrice=="" || this.withdrawPrice=="0" || this.withdrawPrice==0){
					this.$u.toast("请输入提现积分");
					this.modelShow=!this.modelShow;
					return;
				}
				if(this.value == "银行卡"){
					if(this.bankPhone == ""){
					this.$u.toast("请输入预留手机号");
					this.modelShow=!this.modelShow;
					return;
					}
					if(!this.$u.test.mobile(this.bankPhone)){
						this.$u.toast("请输入正确的预留手机号");
						this.modelShow=!this.modelShow;
						return;
					}
				}

				if(this.payPassword==""){
					this.$u.toast("请输入交易密码");
					this.modelShow=!this.modelShow;
					return;
				}
				var params={};
				if(this.value=="微信"){
					params.pay_type=1;
					//params.bank_account=this.withdrawTypeList[1].accountInfo.userName;
					params.bank_card=this.withdrawTypeList[1].accountInfo.accout;
				}else if(this.value=="支付宝"){
					params.pay_type=2;
					params.bank_name=this.withdrawTypeList[0].accountInfo.userName;
					params.bank_card=this.withdrawTypeList[0].accountInfo.accout;
				}else{
					params.pay_type=3;
					params.bank_name=this.withdrawTypeList[2].accountInfo.accountBank;
					//params.bank_account=this.withdrawTypeList[2].accountInfo.userName;
					params.bank_card=this.withdrawTypeList[2].accountInfo.accout;
					params.phone = this.bankPhone;
				}
				params.pay_password = this.payPassword;
				params.money=this.withdrawPrice;
				withdraw(this,params);
				var name="accountInfo-2-"+this.spread_code
				uni.setStorageSync(name,this.withdrawTypeList);
			},
			openModel(){
				if(this.realName == null || this.realName == ''){
					this.$u.toast("您还未填写真实姓名,无法提现");
					return;
				}
				this.modelShow=true;
				if(uni.getStorageSync("accountInfo-2-"+this.spread_code)){
					this.withdrawTypeList=uni.getStorageSync("accountInfo-2-"+this.spread_code);
				}
			},
			toExtension(){
				uni.navigateTo({
				  url: '/user/extension?level='+this.level
				});
			},
			showDate(){
				this.dateShow=true;
			},
			changeDate(e){
				this.date=e.result;
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				this.page=1;
				this.logList=[];
				distributeLog(this,{type:(this.tabsCurrent+1),page:this.page,limit:100})
			},
			myTeamClick(){
				uni.navigateTo({
					url:"/user/my_team"
				})
			},
      myYwfx(){
        uni.navigateTo({
          url:"/user/ywfx"
        })
      }
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #20cbd4;
	}
	.header{
		margin: 20rpx 50rpx;
		height: 340rpx;
		border-radius: 20rpx;
		background-size:cover;
		background-image: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/card.png);
		background-position:center center;
		background-repeat:no-repeat no-repeat;
		/* #ifdef H5 */
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		/* #endif */

	}
	.header_top{
		height: 40%;
		padding: 16rpx 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top_user_info{
		display: flex;
		align-items: center;
	}
	.user_info_box{
		margin-left: 15rpx;
		height: 100%;
	}
	.nick_name{
		color: #000000;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
	.user_level{
		width: 75%;
		height: 40rpx;
		background: linear-gradient(90deg, #fbbf48,#fff) no-repeat;;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}
	.levelIcon{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		position: relative;
		left: -5rpx;
	}
	.level_txt{
		text-align: center;
		font-size: 20rpx;
		color: #20CBD4;
	}
	.total_account{
		background: linear-gradient(90deg, #a0edf1, #20cbd4) no-repeat;
		margin: 10rpx 50rpx 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		color: #000000;
		font-size: 30rpx;
		font-weight: 650;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top_qr_img{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.header_bottom{
		height: 60%;
		padding: 20rpx;
	}
	.bottom_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.total_revenue{
		color: #000000;
		font-size: 30rpx;
	}
	.account{
		margin-top: 40rpx;
	}
	.account_item{
		color: #000000;
	}
	.middle{
		margin: 0 50rpx 20rpx;
	}
	.date{
		background-color: #000000;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		color: #20CBD4;
		text-align: center;
		width: 250rpx;
	}
	.bottom{
		padding: 20rpx;
		margin: 0 50rpx 20rpx;
	}
	.bottom_item{
		margin-bottom: 20rpx;
		background-color: rgba(0,0,0,.04);
		padding: 20rpx;
		color: #13797f;
		border-radius: 20rpx;
	}
	.modelContent{
		padding: 40rpx;
	}
	.withdrawType{
		display: flex;
		margin-bottom: 15rpx;
	}
	.accountData{
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		border-bottom: 0.5rpx solid #E4E7ED;
	}
	/* 提现说明 */
	.withdraw-label {
		color: rgb(51, 51, 51);
		font-size: 28rpx;
		margin-bottom: 25rpx;
	}
	.withdraw-describe {
		margin-top: 50rpx;
		/* padding: 0 60rpx; */
	}
    .content {
        font-size: 26rpx;
        line-height: 1.6;
        color: #888;
    }

</style>
